<template>
    <div class="collectionPoint_content">
        <div class="collectionPoint_header flex">
            <daraBoardStreetAnalysis class="flex-3" />
            <Ringe class="flex-1 two" />
        </div>
        <div class="collectionPoint_footer mt-10">
            <daraBoardFooterAnalysis />
        </div>
    </div>
</template>
<script lang="ts" setup>
import {
    ref,
    computed,
    watch,
    onMounted,
    onBeforeUnmount,
    reactive,
    shallowRef,
} from "vue";
import { assetStatisticsApi } from "@/api/dataBoard";
import { useStore } from "vuex";
import Ringe from "./components/collectionPoint-header/ringe-chart.vue";
import daraBoardStreetAnalysis from "./components/collectionPoint-header/daraBoardStreetAnalysis.vue";
import daraBoardFooterAnalysis from "./components/collectionPoint-footer/collectionPoint_Barchart.vue";
const store = useStore();

const props = defineProps<{}>();
let assetStatisticsObj = ref({});
const timeType = computed(() => store.state.timeType); // 右上角的时间选择
watch(
    timeType,
    () => {
        init();
    },
    {
        immediate: true,
    }
);
onMounted(() => {
});
function init() {
    getAssetStatistics();
}
async function getAssetStatistics() {
    assetStatisticsObj.value = {};
    const res = await assetStatisticsApi({});
    if (res.status != 200) return;
    assetStatisticsObj.value = res.data.result;
}
onBeforeUnmount(() => { });
</script>

<style lang="scss" scoped>
.collectionPoint_content {
    width: 100%;
    padding: 10px;

    .collectionPoint_header {
        width: 100%;

        .two {
            margin-left: 10px;
        }
    }


    .collectionPoint_footer {
        width: 100%;
    }
}
</style>